.vp-reveal-page {
  .vp-reveal {
    min-width: 100vw;
    min-height: 100vh;
  }

  .menu-button,
  .back-button,
  .home-button {
    position: fixed;
    bottom: 2rem;

    box-sizing: content-box;
    width: 1rem;
    height: 1rem;
    padding: 0.5rem;
    border: 0;
    border-radius: 50%;

    background: var(--reveal-c-control);
    box-shadow: 0 2px 8px 2px var(--reveal-c-shadow);

    cursor: pointer;

    &:hover {
      background: var(--reveal-c-control-hover);
    }
  }

  .menu-button {
    inset-inline-start: 2rem;
    z-index: 50;
    vertical-align: middle;
    transition: transform 0.2s ease-in-out;

    &::before {
      content: ' ';
      margin-top: 0.125em;
    }

    &::after {
      content: ' ';
      margin-bottom: 0.125em;
    }

    .icon {
      margin: 0.2em 0;
    }

    &::before,
    &::after,
    .icon {
      display: block;

      width: 100%;
      height: 0.2em;
      border-radius: 0.05em;

      background: var(--reveal-c-accent);

      transition: transform 0.2s ease-in-out;
    }
  }

  .back-button {
    inset-inline-start: 2rem;
    z-index: 49;

    opacity: 0;

    transition:
      inset-inline-start 0.2s ease-out,
      opacity 0.2s ease-out;

    fill: var(--reveal-c-accent);
  }

  .home-button {
    inset-inline-start: 2rem;
    z-index: 48;

    opacity: 0;

    transition:
      inset-inline-start 0.2s ease-out,
      opacity 0.2s ease-out;

    fill: var(--reveal-c-accent);
  }

  .active {
    .menu-button {
      &::before {
        transform: translateY(0.4em) rotate(135deg);
      }

      .icon {
        transform: scale(0);
      }

      &::after {
        transform: translateY(-0.4em) rotate(-135deg);
      }
    }

    .back-button {
      inset-inline-start: 4.5rem;
      opacity: 1;
    }

    .home-button {
      inset-inline-start: 7rem;
      opacity: 1;
    }
  }
}
